import 'package:flutter/material.dart';
import 'package:flutter_cool_card_home/data.dart';
import 'dart:math';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

var cardAspectRatio = 12.0 / 16.0;
var widgetAspecRatio = cardAspectRatio * 1.2;

class _MyHomePageState extends State<MyHomePage> {

  var currentPage = images.length - 1.0;

  @override
  Widget build(BuildContext context) {

    PageController _controller = PageController(initialPage: images.length - 1);
    _controller.addListener((){
      setState(() {
        currentPage = _controller.page;
      });
    });

    return Scaffold(
      backgroundColor: Color(0xff2d3447),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            // 卡片
            Stack(
              children: <Widget>[
                CardScrollWidget(currentPage),
                Positioned.fill(
                  child: PageView.builder(
                    controller: _controller,
                    itemCount: images.length,
                    reverse: true,
                    itemBuilder: (context,index){
                      return Container();
                    },
                  ),
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}


class CardScrollWidget extends StatelessWidget {
  
  final double currentPage;
  var padding = 20.0;
  var verticalInset = 20.0;

  CardScrollWidget(this.currentPage);

  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: widgetAspecRatio,
      child: LayoutBuilder(
        builder: (context,contraints){
          var width = contraints.maxWidth;
          var height = contraints.maxHeight;

          print("width = $width, height = $height");

          var safeWidth = width - 2 * padding;
          var safeHeight = height - 2 * padding;

          var heightOfPrimaryCard = safeHeight;
          var widthofPrimaryCard = heightOfPrimaryCard * cardAspectRatio;

          var primaryCardLeft = safeWidth - widthofPrimaryCard;
          var horizontalInset = primaryCardLeft / 2;

          List<Widget> list = [];
          for(var i = 0; i < images.length; i++){
            var delta = i - currentPage;
            bool isOnright = delta > 0;

            var start = padding + max(primaryCardLeft - horizontalInset * -delta *(isOnright ? 15 : 1), 0.0);
            
            var cardItem = Positioned.directional(
              top: padding + verticalInset * max(-delta, 0),
              bottom: padding + verticalInset * max(-delta, 0),
              start: start,
              textDirection: TextDirection.rtl,
              child: AspectRatio(
                aspectRatio: cardAspectRatio,
                child: Stack(
                  children: <Widget>[
                    Image.asset(images[i], fit: BoxFit.cover,),
                  ],
                ),
              ),
            );

            list.add(cardItem);
          }

          return Stack(
            children: list,
          );
        },
      ),
    );
  }
}

